<template>
  <el-dialog
    :model-value="modelValue"
    @update:model-value="changeModelValue"
    draggable
    :title="title"
    width="80%"
    :close-on-click-modal="false"
  >
    <el-table
      ref="multipleTable"
      :row-key="row => row.id"
      :data="info"
      style="width: 100%"
      border
      max-height="500"
      stripe
    >
      <el-table-column prop="name" label="商品名称" min-width="120"  align="center">
        <template #default="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sku" label="商品规格"  align="center"></el-table-column>
      <el-table-column prop="typeName" label="商品类型" min-width="90"  align="center"></el-table-column>
      <el-table-column prop="code" label="商品条形码" min-width="100"  align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="isExport" label="是否出库" width="85"  align="center">
        <template #default="{ row }">
          <el-tag v-if="row.isExport * 1" type="danger">已出库</el-tag>
          <el-tag v-else>未出库</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="transfer" label="快递单号" min-width="90"  align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="memo" label="备注"  align="center" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.memo || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="exportTime" label="出库时间"  align="center" width="170">
        <template #default="{ row }">
          {{ formattedDateTime(row.exportTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="170">
        <template #default="{ row }">
          {{ formattedDateTime(row.createTime) }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
  import { computed } from 'vue';
  import { useDateFomatter } from '@/hooks/formatter';

  const props = defineProps({
    info: {
      type: Array,
      default: () => [],
    },
    modelValue: {
      type: Boolean,
      default: false,
    },
    isDetail: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(['close', 'reload', 'update:modelValue']);

  const title = computed(() => {
    return '出库商品';
  });

  const { formattedDateTime } = useDateFomatter();


  function changeModelValue(v) {
    emits('update:modelValue', v);
  }
</script>

<style lang="scss" scoped>
  .edit {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background: #212121;
    border-radius: 5px;
    padding: 20px;
  }

  ::v-deep(.el-input.is-disabled .el-input__inner) {
    color: #ff5722 !important; // 修改为你想要的颜色，例如橙色
  }
</style>
